<template>
    <a-modal
        :title="tableTitle"
        :visible="visible"
        width="1200px"
        @ok="handleOk"
        :maskClosable="false"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
    >

        <a-form-model ref="form" :model="form" :rules="rules">

            <a-descriptions bordered :column="2">
                <a-descriptions-item label="政策名称" :span="1">
                    <a-form-model-item
                        prop="policyTitle"
                        :rules="{
                            required: true,
                            message: '请输入政策名称',
                            trigger: 'change',
                        }">
                        <a-input :maxLength="100" placeholder="请输入政策名称"
                                 v-model="form.policyTitle"></a-input>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策类型" :span="1">
                    <a-form-model-item
                        prop="policyType"
                        :rules="{
                            required: true,
                            message: '请选择政策类型',
                            trigger: 'change',
                        }">
                        <a-select
                                v-model="form.policyType"
                                placeholder="请选择政策类型"
                                showSearch
                                allowClear>
                            <a-select-option :value="item.codeMasterValue" :key="item.codeMasterName" v-for="(item,index) in $store.getters.dictionary['POLICY_TYPE']">{{ item.codeMasterName }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策来源" :span="1">
                    <a-form-model-item
                        prop="policySource"
                        :rules="{
                            required: true,
                            message: '请输入政策来源',
                            trigger: 'change',
                        }">
                        <a-input :maxLength="100" placeholder="请输入政策来源"
                                 v-model="form.policySource"></a-input>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策原文链接" :span="1">
                    <a-form-model-item
                        prop="policySourceUrl"
                        :rules="{
                            required: true,
                            message: '请输入原文链接',
                            trigger: 'change',
                        }">
                        <a-input :maxLength="100" placeholder="请输入政策原文链接"
                                 v-model="form.policySourceUrl"></a-input>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="原文地址是否失效" :span="1">
                    <a-form-model-item
                        prop="urlInvalid"
                        :rules="{
                            required: true,
                            message: '请选择状态',
                            trigger: 'change',
                        }">
                        <a-radio-group v-model="form.urlInvalid">
                            <a-radio :value="true" :key="0">失效</a-radio>
                            <a-radio :value="false" :key="1">有效</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策区域" :span="1">
                    <a-form-model-item
                        prop="policyAreaCode"
                        :rules="{
                            required: true,
                            message: '请选择政策区域',
                            trigger: 'change',
                        }">
                        <a-select
                            v-model="form.policyAreaCode"
                            placeholder="请选择政策区域"
                            showSearch
                            allowClear>
                            <a-select-option :value="item2.codeMasterValue" :key="index2"
                                             v-for="(item2,index2) in ($store.getters.dictionary['PUBLISH_AREA'])">
                                {{item2.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="发布时间" :span="1">
                    <a-form-model-item
                        prop="publishDateTime"
                        :rules="{
                            required: true,
                            message: '请选择发布时间',
                            trigger: 'change',
                        }">
                        <xlDate
                            placeholder="请选择发布时间"
                            :dataType="'dateTime'"
                            v-model="form['publishDateTime']">
                        </xlDate>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="发布部门" :span="1">
                    <a-form-model-item
                        prop="publishDepartmentCode"
                        :rules="{
                            required: true,
                            message: '请选择发布部门',
                            trigger: 'change',
                        }">
                        <a-select
                            v-model="form.publishDepartmentCode"
                            placeholder="请选择发布部门"
                            showSearch
                            allowClear>
                            <a-select-option :value="item2.codeMasterValue" :key="index2"
                                             v-for="(item2,index2) in ($store.getters.dictionary['PUBLISH_DEPARTMENT'])">
                                {{item2.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="政策原文内容" :span="2">
                    <a-form-model-item
                        prop="policyOriginalTextContent"
                        :rules="{
                            required: true,
                            message: '请输入政策原文内容',
                            trigger: 'change',
                        }">
                        <editor
                                v-model="form.policyOriginalTextContent">
                        </editor>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="附件" :span="2">
                    <a-form-model-item>
                        <a-upload
                                @change="onChange"
                                name="file"
                                action="/system/api/upload/file"
                                :accept="accept"
                                :beforeUpload="beforeUpload"
                                :file-list="fileLists"
                        >
                            <a-button :disabled="$attrs.disabled || false">
                                <a-icon type="upload"/>
                                上传文件
                            </a-button>
                            <span style="font-size: 10px;color: #818181;"><br/>
                                文件大小: {{ (size / 1024 / 1024) + 'M' }}<br/>
                                支持格式: {{ accept }}
                            </span>
                        </a-upload>
                    </a-form-model-item>
                </a-descriptions-item>
            </a-descriptions>

        </a-form-model>
    </a-modal>
</template>

<script>
import editor from '@/components/formUntil/editor'
import xlDate from "@/components/formUntil/xlDate";
import {removePolicyAttachment} from "@/assets/api/policy";
export default {
    name: "xlForm",
    data(){
        return {
            tableTitle: '新增',
            confirmLoading: false,
            policyTypeList: [],
            fileLists: [],
            size: 2097152,
            accept: '.pdf,.docx,.doc,.xls,.xlsx',
            form: {},
            formData: {},
            rules: {},
            visible: false,
            type: 1
        }
    },
    components: {
        editor,
        xlDate
    },
    methods:{
        handleOk() {
            this.form.policyAttachments = this.fileLists.map(item => {
                return {
                    fileName: item?.name || item?.response?.result?.fileName || null,
                    filePath: item?.url || item?.response?.result?.path || null,
                    id: item.id || null
                }
            })
            this.form.publishDepartmentName = this.$store.getters.dictionary['PUBLISH_DEPARTMENT']
                .filter(item => item.codeMasterValue == this.form.publishDepartmentCode)[0]?.codeMasterName
            this.form.policyAreaName = this.$store.getters.dictionary['PUBLISH_AREA']
                .filter(item => item.codeMasterValue == this.form.policyAreaCode)[0]?.codeMasterName
            this.$refs.form.validate(async (valid, value) => {
                if (valid) {
                    this.confirmLoading = true
                    await this.$emit('handleOk', this.form)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleCancel() {
            this.visible = false
        },
        formatData() {
        },
        formatForm(form) {
            delete form.createDateTime
            delete form.modifyDateTime
            delete form.modifyBy
            delete form.createBy
            this.fileLists = []
            //整理字段数据 ／ 赋值 清空等
            this.form = Object.assign({}, form)
            if (this.form.policyAttachments) {
                this.fileLists = this.form.policyAttachments.map(item => {
                    return {
                        uid: item.id,
                        id: item.id,
                        name: item.fileName,
                        status: 'done',
                        url: item.filePath
                    }
                })
            }
        },
        beforeUpload(e, file) {
            if(e.size > this.size){
                file.splice(file.length - 1)
                this.$message.error('文件大小超出限制')
                return false
            }
            let fileAccept = e.name.split('.').pop()
            let accept = this.accept.slice(1).split(',.')
            if(accept.indexOf(fileAccept) == -1){
                file.splice(file.length - 1)
                this.$message.error('文件格式错误')
                return false
            }

        },
        onChange(info) {
            console.log(info)
            this.fileLists = info.fileList
            if (info.file.status === 'removed' && info.file.id) {
                removePolicyAttachment({param: info.file.id}).then(_ => {
                    this.$message.success(`${info.file.name} 删除成功`)
                })
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 上传成功`)
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 上传失败`)
            }
        },
        // beforeRemoveEnclosure(file) {
        //     return this.$confirm({
        //         title: '提示',
        //         content: '确认删除 ' + file.name,
        //         onOk: () => {
        //             console.log('ok')
        //             return true
        //         },
        //         onCancel: () => {
        //             console.log('cancel')
        //             return false
        //         }
        //     })
        // }
    }
}
</script>

<style scoped lang="less">
/deep/ .ant-form-item {
    margin: 0;
}

/deep/ .ant-input-number {
    width: 100%;
}

.xl-dateRange {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>
